<template>
  <div class="mapTool" :style="{ left, bottom }" @click="handleClickShowMapTool">
    <img class="mapToolIcon" :class="{greyIcon: !state.isShowMapToolList}" src="./images/icon.png" />
    <div class="mapToolListBox" v-show="state.isShowMapToolList">
      <ul class="mapToolList">
        <li class="mapToolCard" @click.stop="handleClickMapTool('length')">
          <img :src="measureLengthIcon" alt="测量距离" />
          <span>测量距离</span>
        </li>
        <li class="mapToolCard" @click.stop="handleClickMapTool('area')">
          <img :src="measureAreaIcon" alt="测量面积" />
          <span>测量面积</span>
        </li>
        <li class="mapToolCard" @click.stop="handleClickMapTool('clean')">
          <img :src="cleanIcon" alt="清除标绘" />
          <span>清除标绘</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { measureLength, measureArea, clearMeasure } from 'gmap-ol';
  import measureLengthIcon from './images/measureLength.png';
  import measureAreaIcon from './images/measureArea.png';
  import cleanIcon from './images/cleanIcon.png';

  defineOptions({ name: 'MapTool' });

  const props = defineProps({
    name: { type: String },
    left: {
      type: String,
      default: '-50px',
    },
    bottom: {
      type: String,
      default: '100px',
    },
    globalMap: {
      type: Object,
      default: null,
    },
  });

  const state = reactive({
    isShowMapToolList: false,
    typeIndex: '',
  });

  const handleClickShowMapTool = () => {
    state.isShowMapToolList = !state.isShowMapToolList
  }

  // 点击切换地图底图
  const handleClickMapTool = (typeIndex) => {
    const olMap = props.globalMap;
    state.typeIndex = typeIndex;
    if (typeIndex === 'length') {
      const measureOption = {
        showSegments: true,
        clearPrevious: true,
      };
      measureLength(olMap, measureOption, (data)=>{
        console.log(data, '测量距离数据'); // 测量距离数据
      });
    } else if (typeIndex === 'area') {
      const measureOption = {
        showSegments: true,
        clearPrevious: true,
      };
      measureArea(olMap, measureOption, (data)=>{
        console.log(data, '测量面积数据'); // 测量面积数据
      });
    } else {
      // 清除标绘
      clearMeasure();
    }
  };
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .mapTool {
    width: 40px;
    height: 40px;
    //background: rgba(251, 252, 255, 1);
    background: rgba(50, 120, 160, 0.6);
    box-shadow: 0px 4px 6px 0px #03225917;
    border-radius: 6px;
    border: 1px solid rgba(50, 120, 160, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(8px);
    img.mapToolIcon {
      filter: brightness(100%) saturate(100%) invert(0%);
    }
    &:hover, &:active  {
      background: rgba(50, 120, 160, 1);
      img.mapToolIcon {
        filter: brightness(125%) saturate(125%) invert(0%);
      }
    }
    /* &:hover, &:active {
      // background: #e8fff4;
      border: 1px solid #b9e9d3;
    } */
    img.mapToolIcon {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .greyIcon {
      //filter: grayscale(100%);
    }
    .mapToolListBox {
      position: absolute;
      right: 50px;
      width: 116px;
      background: rgba(251, 252, 255, 1);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      border: 1px solid #fff;
      padding: 10px;
      ul.mapToolList {
        display: grid;
        grid-template-columns: 100%;
        grid-row-gap: 10px;
        grid-column-gap: 6px;
        li {
          display: flex;
          align-items: center;
          filter: grayscale(100%);
          color: #111;
          &:hover, &:active {
            filter: none !important;
            color: #409fff;
          }
          img {
            width: 24px;
            height: 24px;
            margin-right: 6px;
          }
        }
        .isActive {
          filter: none !important;
          color: #409fff;
        }
      }
    }
  }
</style>
